<template>
  <div class="basic-info-container">
    <h3 class="section-title">个人基本信息</h3>
    <p class="section-desc">
      您可以修改您的基本资料，这些信息将显示在您的个人主页
    </p>

    <a-form
      ref="formRef"
      :model="formData"
      class="info-form"
      :label-col-props="{ span: 24 }"
      :wrapper-col-props="{ span: 24 }"
      layout="vertical"
      auto-label-width
    >
      <a-row :gutter="24">
        <a-col :xs="24" :md="12">
          <a-form-item
            field="email"
            label="邮箱"
            :rules="[
              { required: true, message: '请输入邮箱' },
              { type: 'email', message: '请输入有效的邮箱地址' }
            ]"
          >
            <a-input
              v-model="formData.email"
              placeholder="请输入邮箱"
              allow-clear
            >
              <template #prefix>
                <icon-email />
              </template>
            </a-input>
          </a-form-item>
        </a-col>

        <a-col :xs="24" :md="12">
          <a-form-item
            field="nickName"
            label="昵称"
            :rules="[{ required: true, message: '请输入昵称' }]"
          >
            <a-input
              v-model="formData.nickName"
              placeholder="请输入昵称"
              allow-clear
            >
              <template #prefix>
                <icon-user />
              </template>
            </a-input>
          </a-form-item>
        </a-col>
      </a-row>

      <a-row :gutter="24">
        <a-col :xs="24" :md="12">
          <a-form-item field="realName" label="姓名">
            <a-input
              v-model="formData.realName"
              placeholder="请输入姓名"
              allow-clear
            >
              <template #prefix>
                <icon-tag />
              </template>
            </a-input>
          </a-form-item>
        </a-col>

        <a-col :xs="24" :md="12">
          <a-form-item field="mobile" label="手机号码">
            <a-input
              v-model="formData.mobile"
              placeholder="请输入手机号码"
              allow-clear
            >
              <template #prefix>
                <icon-mobile />
              </template>
            </a-input>
          </a-form-item>
        </a-col>
      </a-row>

      <a-form-item
        field="introduce"
        label="个人简介"
        :rules="[{ maxLength: 200, message: '个人简介不能超过200字' }]"
      >
        <a-textarea
          v-model="formData.introduce"
          placeholder="请输入个人简介，最多不超过200字"
          :max-length="200"
          :show-word-limit="true"
          allow-clear
        />
      </a-form-item>

      <a-form-item>
        <div class="form-actions">
          <a-button type="primary" :loading="submitting" @click="handleSubmit">
            保存修改
          </a-button>
          <a-button @click="reset">重置</a-button>
        </div>
      </a-form-item>
    </a-form>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { FormInstance } from '@arco-design/web-vue/es/form';
import { SysUserUpdateRequest } from '@/api/gen-api/models/sys/SysUserUpdateRequest.ts';
import { useUserStore } from '@/store';
import { SysUserService } from '@/api/gen-api';
import { Message } from '@arco-design/web-vue';

const userStore = useUserStore();
const formRef = ref<FormInstance>();
const submitting = ref(false);

const formData = ref<SysUserUpdateRequest>({
  id: userStore.id,
  email: userStore.email,
  nickName: userStore.nickName,
  realName: userStore.realName,
  mobile: userStore.mobile,
  introduce: userStore.introduce
});

const handleSubmit = async () => {
  if (formRef.value) {
    const validResult = await formRef.value.validate();
    if (!validResult) {
      submitting.value = true;

      SysUserService.updateUserInfo(formData.value)
        .then(res => {
          if (res) {
            Message.success('个人信息更新成功');
            // 更新全局状态
            userStore.setInfo({
              ...userStore.userInfo,
              ...formData.value
            });
          } else {
            Message.error('更新失败，请联系管理员');
          }
        })
        .catch(() => {
          Message.error('更新失败，请稍后重试');
        })
        .finally(() => {
          submitting.value = false;
        });
    }
  }
};

onMounted(() => {
  // 获取用户最新信息
  SysUserService.getInfo().then(res => {
    if (res.result) {
      userStore.setInfo(res.result);
      // 更新表单数据
      formData.value = {
        id: res.result.id,
        email: res.result.email,
        nickName: res.result.nickName,
        realName: res.result.realName,
        mobile: res.result.mobile,
        introduce: res.result.introduce
      };
    }
  });
});

const reset = () => {
  formRef.value?.resetFields();
};
</script>

<style scoped lang="less">
.basic-info-container {
  padding: 24px;
  background-color: var(--color-bg-2);
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.section-title {
  margin: 0 0 8px 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text-1);
}

.section-desc {
  margin: 0 0 28px 0;
  font-size: 14px;
  color: var(--color-text-3);
}

.info-form {
  max-width: 100%;

  :deep(.arco-form-item) {
    margin-bottom: 24px;
  }

  :deep(.arco-form-item-label) {
    font-weight: 500;

    label {
      color: var(--color-text-2);
    }
  }

  :deep(.arco-input:focus),
  :deep(.arco-textarea:focus),
  :deep(.arco-select:focus-within) {
    border-color: #2759cd;
    box-shadow: 0 0 0 2px rgba(39, 89, 205, 0.1);
  }

  :deep(.arco-input-wrapper) {
    .arco-input {
      padding-left: 40px;
      height: 40px;
    }

    .arco-input-prefix {
      margin-right: 12px;

      .arco-icon {
        color: #2759cd;
        font-size: 16px;
      }
    }
  }

  :deep(.arco-textarea) {
    padding: 12px;
    line-height: 1.6;
    min-height: 120px;
    border-radius: 4px;

    &:hover {
      border-color: #2759cd;
    }
  }
}

.form-actions {
  display: flex;
  gap: 16px;
  margin-top: 12px;

  .arco-btn {
    padding: 0 30px;
    height: 40px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;

    &.arco-btn-primary {
      background-color: #2759cd;
      border-color: #2759cd;

      &:hover {
        background-color: #3769dd;
        border-color: #3769dd;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(39, 89, 205, 0.2);
      }
    }

    &:not(.arco-btn-primary):hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
  }
}

@media (max-width: 768px) {
  .basic-info-container {
    padding: 20px;
  }

  .form-actions {
    flex-direction: column;
    width: 100%;

    .arco-btn {
      width: 100%;
    }
  }
}
</style>
